<script setup lang="ts">
import { ref } from "vue";
const list = ref<ListItem[]>([]);
const v = ref<string>("params");
interface ListItem {
    id: number;
    value: string;
}
const showingList = ref<ListItem[]>([]);
let idCounter: number = 0;
let editingId = ref<number>(-1);
let editingValue = ref<string>("");
// 函数
function fn (msg: string): number {
    console.log(msg);
    return 1;
}
// 增
function onAdd() {
	list.value.push({ id: idCounter++, value: v.value });
	showingList.value = list.value.concat();
	v.value = "";
}
// 删
function deleteContent(p:number): void {
	list.value = list.value.filter((item) => item.id !== p);
	showingList.value = list.value.concat();
}
// 编辑
function editContent(item): void {
	editingId.value = item.id;
	editingValue.value = item.value;
}
// 查询
function searchContent() {
	showingList.value = list.value.filter((item) =>
		item.value.includes(v.value)
	);
}
// 修改确认
function editContentOk(item): void {
	// 重置修改状态
	item.value = editingValue.value;
	editContentCancel();
}
// 取消修改
function editContentCancel(): void {
	editingId.value = -1;
	editingValue.value = "";
}
</script>

<template>
	<input type="text" v-model="v" />
	<button @click="onAdd">添加</button>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          
	<button @click="searchContent">查询</button>
	<ul>
		<li v-for="item in showingList" :key="item.id">
			<template v-if="editingId !== item.id">
				<span>{{ item.value }}</span>
				<button @click="editContent(item)">修改</button>
			</template>
			<template v-else>
				<input type="text" v-model="editingValue" />
				<button @click="editContentOk(item)">确认</button>
				<button @click="editContentCancel">取消</button>
			</template>
			<button @click="deleteContent(item.id)">删除</button>
		</li>
	</ul>
</template>

<style scoped>
a {
	color: #42b983;
}
</style>
